<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :keyboard="false"
    :forceRender="true"
    switchFullscreen
    @cancel="handleCancel"
    @ok="handleOk"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 100%;overflow-y: hidden">
    <template slot="footer">
      <a-button @click="handleCancel">{{$t('inPrint.cancel')}}</a-button>
      <!--      <a-button v-if="isCanCheck" @click="handleOkAndCheck">保存并审核</a-button>-->
      <a-button type="primary" @click="handleOk" :disabled="confirmLoading">{{$t('commodityManagement.preservation')}}</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <!--        <a-row class="form-row" :gutter="24">-->
        <!--          <a-col :lg="6" :md="12" :sm="24">-->
        <!--            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="往来单位">-->
        <!--              <a-select placeholder="选择往来单位" v-decorator="[ 'organId', validatorRules.organId ]"-->
        <!--                        :dropdownMatchSelectWidth="false" showSearch optionFilterProp="children">-->
        <!--                <a-select-option v-for="(item,index) in organList" :key="index" :value="item.id">-->
        <!--                  {{ item.supplier }}-->
        <!--                </a-select-option>-->
        <!--              </a-select>-->
        <!--            </a-form-item>-->
        <!--          </a-col>-->
        <!--          <a-col :lg="6" :md="12" :sm="24">-->
        <!--            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="财务人员">-->
        <!--              <a-select placeholder="选择财务人员" v-decorator="[ 'handsPersonId', validatorRules.handsPersonId ]"-->
        <!--                        :dropdownMatchSelectWidth="false" showSearch optionFilterProp="children">-->
        <!--                <div slot="dropdownRender" slot-scope="menu">-->
        <!--                  <v-nodes :vnodes="menu" />-->
        <!--                  <a-divider style="margin: 4px 0;" />-->
        <!--                  <div v-if="isTenant" style="padding: 4px 8px; cursor: pointer;"-->
        <!--                       @mousedown="e => e.preventDefault()" @click="addPerson"><a-icon type="plus" /> 新增经手人</div>-->
        <!--                </div>-->
        <!--                <a-select-option v-for="(item,index) in personList" :key="index" :value="item.id">-->
        <!--                  {{ item.name }}-->
        <!--                </a-select-option>-->
        <!--              </a-select>-->
        <!--            </a-form-item>-->
        <!--          </a-col>-->
        <!--          <a-col :lg="6" :md="12" :sm="24">-->
        <!--            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">-->
        <!--              <j-date v-decorator="['billTime', validatorRules.billTime ]" :show-time="true"/>-->
        <!--            </a-form-item>-->
        <!--          </a-col>-->
        <!--          <a-col :lg="6" :md="12" :sm="24">-->
        <!--            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">-->
        <!--              <a-input placeholder="请输入单据编号" v-decorator.trim="[ 'billNo' ]" :readOnly="true"/>-->
        <!--            </a-form-item>-->
        <!--          </a-col>-->
        <!--        </a-row>-->
        <j-editable-table
          :ref="refKeys[0]"
          :loading="accountTable.loading"
          :columns="accountTable.columns"
          :dataSource="accountTable.dataSource"
          @added="onAdded"
          :maxHeight="300"
          :rowNumber="true"
          :rowSelection="true"
          :actionButton="true">
           <span slot="action" slot-scope="text, record">
          <a-select :placeholder="$t('inPrint.selectPerson')" style="width: 200px" v-decorator="[ 'userId' ]" @change="select($event,record)">
            <a-select-option v-for="(item,index) in userList" :key="index" :value="item.id+','+item.userName">
              {{ item.userName }}
            </a-select-option>
          </a-select>
            </span>
        </j-editable-table>
        <!--        <a-row class="form-row" :gutter="24">-->
        <!--          <a-col :lg="24" :md="24" :sm="24">-->
        <!--            <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="">-->
        <!--              <a-textarea :rows="2" placeholder="请输入备注" v-decorator="[ 'remark' ]" style="margin-top:8px;"/>-->
        <!--            </a-form-item>-->
        <!--          </a-col>-->
        <!--        </a-row>-->
        <!--        <a-row class="form-row" :gutter="24">-->
        <!--          <a-col :lg="6" :md="12" :sm="24">-->
        <!--            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="收入账户">-->
        <!--              <a-select placeholder="选择收入账户" v-decorator="[ 'accountId', validatorRules.accountId ]"-->
        <!--                        :dropdownMatchSelectWidth="false" showSearch optionFilterProp="children">-->
        <!--                <div slot="dropdownRender" slot-scope="menu">-->
        <!--                  <v-nodes :vnodes="menu" />-->
        <!--                  <a-divider style="margin: 4px 0;" />-->
        <!--                  <div v-if="isTenant" style="padding: 4px 8px; cursor: pointer;"-->
        <!--                       @mousedown="e => e.preventDefault()" @click="addAccount"><a-icon type="plus" /> 新增结算账户</div>-->
        <!--                </div>-->
        <!--                <a-select-option v-for="(item,index) in accountList" :key="index" :value="item.id">-->
        <!--                  {{ item.name }}-->
        <!--                </a-select-option>-->
        <!--              </a-select>-->
        <!--            </a-form-item>-->
        <!--          </a-col>-->
        <!--          <a-col :lg="6" :md="12" :sm="24">-->
        <!--            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="收入金额">-->
        <!--              <a-input placeholder="请输入收入金额" v-decorator.trim="[ 'changeAmount', validatorRules.changeAmount ]" :readOnly="true"/>-->
        <!--            </a-form-item>-->
        <!--          </a-col>-->
        <!--          <a-col :lg="6" :md="12" :sm="24">-->
        <!--          </a-col>-->
        <!--          <a-col :lg="6" :md="12" :sm="24">-->
        <!--          </a-col>-->
        <!--        </a-row>-->
        <!--        <a-row class="form-row" :gutter="24">-->
        <!--          <a-col :lg="6" :md="12" :sm="24">-->
        <!--            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="附件">-->
        <!--              <div v-if="fileLoading">Loading...</div>
              <j-upload v-else :fileList="fileList" bizPath="financial"></j-upload>-->
        <!--            </a-form-item>-->
        <!--          </a-col>-->
        <!--        </a-row>-->
      </a-form>
    </a-spin>
  </j-modal>
</template>
<script>
  import pick from 'lodash.pick'
  import { FormTypes } from '@/utils/JEditableTableUtil'
  import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
  import JUpload from '@/components/jeecg/JUpload'
  import { getUserListNotTenant } from '@/api/api'
  import { getAction } from '@/api/manage'

  export default {
    name: 'WorkflowConfigSetUser',
    mixins: [JEditableTableMixin],
    components: {
      JUpload
    },
    data () {
      return {
        title: this.$t('setailManagement.operation'),
        width: '1600px',
        moreStatus: false,
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        visible: false,
        model: {},
        fileList: [],
        length:0,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        refKeys: ['workflowConfigTable',],
        activeKey: 'workflowConfigTable',
        accountTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: this.$t('inPrint.processTame'),
              key: 'process',
              width: '15%',
              type: FormTypes.select,
              options: [],
              placeholder: this.$t('inPrint.pleaseTnter')+'${title}',
              allowSearch: true,
              disabled:true,
              validateRules: [{ required: true, message: '${title}'+this.$t('inPrint.cannotTe') }]
            },
            {
              title: this.$t('inPrint.personTn'),
              key: 'typeValue',
              width: '25%',
              type: FormTypes.select,
              options: [],
              placeholder: this.$t('inPrint.')+'${title}',
              allowSearch: true,
              validateRules: [{ required: true, message: '${title}'+this.$t('inPrint.cannotTe') }]
            }
          ]
        },
        confirmLoading: false,
        url: {
          list:"/workflowConfigDetail/list",
          edit: '/workflowConfig/doSaveConfigUser'

        }
      }
    },
    created () {
    },
    methods: {
      //调用完edit()方法之后会自动调用此方法
      editAfter () {
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'process', 'typeValue'))
        })
        // 加载子表数据
        let params ={"search":{
          mainId: this.model.id,
          typeCode:"USER"
        }}
        let url = this.readOnly ? this.url.list : this.url.list
        this.requestSubTableData(url, params, this.accountTable)
        this.initProcess()
        this.initUser()
      },
      //提交单据时整理成formData
      classifyIntoFormData (allValues) {
        console.log(allValues)
        console.log(this.model, 'workflowconfigSetUser.vue')
        let detailArr = allValues.tablesValue[0].values
        for (let item of detailArr) {
            item.mainId=this.model.id
          }
        return {
          id: this.model.id,
          detailList: detailArr,
        }
      },
      initProcess () {
        for (let item of this.accountTable.columns) {
          if (item.key == 'process') {
            item.options = []
            for (let i = 1; i <= 5; i++) {
              let process = {}
              process.value = i + '' //注意-此处value必须为字符串格式
              process.text = this.$t('inPrint.approvalTrocess') + i
              process.title = this.$t('inPrint.approvalTrocess') + i
              item.options.push(process)
            }
          }
        }
      },
      initUser () {
        getUserListNotTenant({}).then((res) => {
          if (res) {
            for (let item of this.accountTable.columns) {
              if (item.key == 'typeValue') {
                item.options = []
                for (let i = 0; i < res.length; i++) {
                  let userInfo = {}
                  // userInfo.value = res[i].id + ',' + res[i].userName + ',' + 'USER' //注意-此处value必须为字符串格式
                  userInfo.value = res[i].id + '' //注意-此处value必须为字符串格式
                  userInfo.text = res[i].userName
                  userInfo.title = res[i].userName
                  item.options.push(userInfo)
                }
              }
            }
          }
        })
      },
      onAdded(event) {
        const {row, target } = event
        this.length=this.length +1
        target.setValues([{ rowKey: row.id, values: { process: this.length + '' } }])
        if (this.length>5){
          target.removeRows(row.id)
          this.$message.warning(this.$t('inPrint.upTo5'));
        }
      },
      requestSubTableData(url, params, success) {
        this.loading = true
        getAction(url, params).then(res => {
          if(res && res.code === 200){
            this.accountTable.dataSource = res.data.rows
            this.length= res.data.total;
            typeof success === 'function' ? success(res) : ''
          }
        }).finally(() => {
          this.loading = false
        })
      },
    }
  }
</script>
<style scoped>

</style>